<!--  -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogStatus ? '新增电影' : '修改电影'"
    width="30%"
    @close="dialogClose"
    @open="dialogOpen"
  >
    <el-form
      ref="formRef"
      :rules="formRule"
      :model="createForm"
      label-width="100"
    >
      <el-form-item
        prop="name"
        label="学生名称"
      >
        <el-input v-model="createForm.name" />
      </el-form-item>
      <el-form-item
        prop="gender"
        label="性别"
      >
        <el-select
          v-model="createForm.type"
          placeholder=" "
        >
          <el-option
            v-for="(value, key) in genderEnum"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="grade"
        label="年级"
      >
        <el-select
          v-model="createForm.grade"
          placeholder=" "
        >
          <!-- <el-option
            v-for="(value, key) in countryEnum"
            :key="key"
            :label="key"
            :value="value"
          /> -->
        </el-select>
      </el-form-item>
      <el-form-item
        prop="subject"
        label="学科"
      >
        <el-select
          v-model="createForm.subject"
          placeholder=" "
        >
          <el-option
            v-for="(value, key) in subjectEnum"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="海报">
        <el-upload
          v-model:file-list="uploadFileUrl"
          :limit="1"
          list-type="picture-card"
          action="http://127.0.0.1:9080/api/upload"
        >
          <Icon
            icon="ic:baseline-plus"
            class="text-2xl"
          />
        </el-upload>
      </el-form-item> -->
      <el-form-item
        prop="date"
        label="上映时间"
      >
        <el-date-picker
          v-model="createForm.date"
          type="date"
          placeholder=" "
        />
      </el-form-item>
      <el-form-item
        prop="age"
        label="简介"
      >
        <el-input
          v-model="createForm.age"
          type="textarea"
          placeholder=" "
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('setDialogVisible', false)">取消</el-button>
        <el-button
          type="primary"
          @click="createFilm(formRef)"
        > 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import { ElDialog, ElUpload } from "element-plus";
import { Icon } from '@iconify/vue';
import { genderEnum, subjectEnum } from "../enum";
import { formRule } from "../rule";
import type { FormInstance, UploadUserFile } from "element-plus";
import { fetchCreateFilm, fetchUpdateFilm } from "@/service";
import { StudentApi } from "~/src/typings/service/student";

const emit = defineEmits([
  "getFilmsList",
  "setDialogStatus",
  "setDialogVisible"
]);
const props = defineProps<{ updateForm: StudentApi.StudentApiRequest }>();
const formRef = ref<FormInstance>();
const dialogStatus = inject<any>("dialogStatus", false);
const dialogVisible = inject<any>("dialogVisible", false);
const createForm = ref<StudentApi.fetchCreateFilm>({
  name: "6",
  gender: 1,
  subject: 1,
  grade: "",
  age: 1,
  date: new Date()
});
const uploadFileUrl = ref<UploadUserFile[]>([]);
async function createFilm(formEl: FormInstance | undefined): Promise<void> {
  let res = null;
  const formValue = {
    ...createForm.value,
    poster: uploadFileUrl.value?.[0]?.response?.data?.url
  };
  await formEl?.validate(async (valid, fields) => {
    if (valid) {
      if (dialogStatus.value) res = await fetchCreateFilm(formValue);
      else res = await fetchUpdateFilm(formValue);
      if (res?.code === 0) {
        emit("setDialogVisible", false);
        window.$message({
          type: "success",
          message: dialogStatus.value ? "创建成功" : "修改成功"
        });
        emit("getFilmsList");
      }
    } else {
      console.log('error submit!', fields);
    }
  });
}

function dialogClose() {
  createForm.value = {
    name: "",
    country: "",
    content: "",
    type: "",
    releaseTime: new Date()
  };
}
function dialogOpen() {
  if (!dialogStatus.value) {
    createForm.value = props?.updateForm;
    uploadFileUrl.value = [{
      name: 'initValue',
      url:  props?.updateForm?.poster
    }];
  };
}
</script>

<style lang="scss" scoped></style>
